<template>
  <div class="rightBodyContent">
    <div class="rightBodyContent-in">
      <tips optionTemplate="student"></tips>
      <!--      搜索组件-->
      <SearchModle dataKey="student" @searchFn="searchFn"></SearchModle>
      <!--      end-->
      <div class="mb-10">
        <div class="toplineBox">
          <div class="toplineBox-left">
            <el-button size="small" @click="addStudent()" type="primary" icon="el-icon-plus">添加学生</el-button>
            <el-button size="small" @click="addExcelList" icon="el-icon-upload2">导入/编辑学生信息</el-button>
            <el-button size="small" @click="gotoOrtherStudent()">往届学生</el-button>
          </div>
          <p class="numberline toplineBox-right">总{{ page.total }}条</p>
        </div>
      </div>
      <!--本体列表，数据 -->
      <div class="table-body">
        <div class="table-body-box">
          <el-table
              ref="multipleTable"
              :data="arryList"
              :stripe="tableStyle.tableStripe"
              :border="tableStyle.tableBorder"
              tooltip-effect="dark"
              header-cell-class-name="table-text-c"
              style="width: 100%">
            <el-table-column
                prop="id"
                label="ID"
                width="90"
                align="center">
            </el-table-column>
            <el-table-column
                prop="name"
                label="姓名"
                width="90"
                align="center">
            </el-table-column>
            <el-table-column
                label="头像"
                align="center">
              <template slot-scope="scope">
<!--                <viewerModle type="1" :imgSrc="scope.row.pic"></viewerModle>-->
                <ImagePreview :src="scope.row.pic" width="40px" height="40px"></ImagePreview>
              </template>
            </el-table-column>
            <el-table-column
                prop="create_time"
                label="本学期班级"
                align="center">
              <template slot-scope="scope">
                <span v-if="scope.row.classes">
                {{ scope.row.classes.class_name }}
                  </span>
                <span v-else>未记录</span>
              </template>
            </el-table-column>
            <el-table-column
                label="学籍号"
                align="center">
              <template slot-scope="scope">
                <span v-if="scope.row.student_code">
                {{ scope.row.student_code }}
                  </span>
                <span v-else>未记录</span>
              </template>
            </el-table-column>
            <el-table-column
                prop="sex"
                label="性别"
                align="center">
            </el-table-column>
            <el-table-column
                prop="seat_number"
                label="座号"
                align="center"
                width="80">
            </el-table-column>
            <el-table-column
                prop="enrol_time"
                label="入校时间"
                align="center">
            </el-table-column>
            <el-table-column
                width="100"
                label="在校状态"
                align="center">
              <template slot-scope="scope">
                <!--正常/离校/转校/毕业-->
                <span :class="scope.row.status=='正常'?'c-success':'c-danger'">
                  {{ scope.row.status == '正常' ? '在校' : '转校/休学' }}
                </span>
                <el-tooltip class="item" effect="light" placement="bottom-start">
                  <div slot="content" class="infocontent">
                    <p>在校：该生还在学校内就读</p>
                    <p>转校：该生已办理转校手续</p>
                    <p>毕业：该生在校已完成学业</p>
                  </div>
                  <i class="el-icon-warning-outline"></i>
                </el-tooltip>
              </template>
            </el-table-column>
            <el-table-column
                label="操作"
                width="140"
                align="center">
              <template slot-scope="scope">
                <el-dropdown @command="handleCommand($event,scope.row)" trigger="click">
                  <el-button type="primary" size="mini">
                    更多操作<i class="el-icon-arrow-down el-icon--right"></i>
                  </el-button>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item :command="4+'-'+scope.$index">学生档案</el-dropdown-item>
                    <!--                    <el-dropdown-item :command="1+'-'+scope.$index">卡片解绑</el-dropdown-item>-->
                    <el-dropdown-item :command="2+'-'+scope.$index">编辑学生信息</el-dropdown-item>
                    <el-dropdown-item :command="3+'-'+scope.$index">转校/休学</el-dropdown-item>
                    <el-dropdown-item :command="6+'-'+scope.$index">二维码</el-dropdown-item>
                    <el-dropdown-item :command="5+'-'+scope.$index">删除</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <!--工具条 分页-->
      <el-col :span="24" class="toolbar">
        <el-pagination
            background
            layout="total, prev, pager, next"
            :current-page="page.pageindex"
            :total="page.total"
            :page-size="page.pagesize"
            @current-change="handleSizeChange">
        </el-pagination>
      </el-col>
      <changeCart :visible.sync="changeCartVisible"></changeCart>
    </div>
    <studentEdit :visible.sync="detailVisible" :studentId="studentId" @initFn="InitFn"></studentEdit>
    <!--    学生档案-->
    <studentInfoPover :visible.sync="studentInfoVisible" :studentId="studentId" @InitFn="InitFn"></studentInfoPover>
    <!--    导入编辑学生-->
    <studentPage :visible.sync="addStudentVisible" @InitFn="InitFn"></studentPage>
    <!--    往届学生-->
    <pastStudent :visible.sync="pastStudentVisible"></pastStudent>
    <qrcode_student :visible.sync="qrcodeVisible" :studentoption="studentoption"></qrcode_student>
  </div>
</template>

<script>
import changeCart from '@/components/dialog/changeCart.vue'
import {pagination, tableoption} from '@/utils/util.js'
import studentEdit from '@/views/admin/Campus/studentDetail'
import studentInfoPover from "./archives/studentInfoPover";
import studentPage from "./student/studentPage";
import pastStudent from "./student/pastStudent";

export default {
  components: {
    changeCart,
    studentEdit,
    studentInfoPover,
    studentPage,
    pastStudent
  },
  data() {
    return {
      addStudentVisible: false, // 添加编辑学生信息
      detailVisible: false,
      studentInfoVisible: false,
      qrcodeVisible:false,
      pastStudentVisible: false,
      studentId: 0,
      handleSelection: [],
      changeCartVisible: false,
      arryList: [], // 页面数据列表
      // 设置table样式
      tableStyle: tableoption,
      // 设置table页面分页所需
      page: {
        pageindex: pagination.pageIndex,
        pagesize: pagination.pageSize,
        total: pagination.total
      },
      // 搜索组件
      searchForm: {},
      studentoption:{}
    }
  },
  created() {
    this.InitFn()
  },
  methods: {
    // 初始化
    InitFn() {
      this.searchForm.p = this.page.pageindex
      this.$fetch(this.api.admin_student_index, this.searchForm).then((response) => {
        if (response.code === 0) {
          this.arryList = response.list.data
          this.page.total = response.list.total
        } else {
        }
      }).catch((err) => {
        console.log(err)
      })
    },
    // 搜索组件
    searchFn(option) {
      this.page.pageindex = 1
      this.searchForm = option
      this.InitFn()
    },
    checkIdCard() {
      this.changeCartVisible = true
    },
    handleSelectionChange(val) {
      this.handleSelection = val
    },
    // 分页
    handleSizeChange(val) {
      this.arryList = []
      this.page.pageindex = val
      this.InitFn()
    },
    // 添加学生
    addStudent(row) {
      this.studentId = row || ''
      this.detailVisible = !this.detailVisible
    },
    // 倒入学生
    addExcelList() {
      this.addStudentVisible = true;
    },
    // 往届生
    gotoOrtherStudent() {
      this.pastStudentVisible = true;
    },
    showStautsFn(command) {
      console.log(command)
      // command 1 离校 2 转校
      let this_ = this
      let optionList = command.split('-')
      let title_ = '确定该生再本校的状态变更为 离校/休学? 提交后该生数据保存，设备ID卡将失效，是否确认此操作!'
      if (optionList[0] === 2) {
        title_ = '确定该生再本校的状态变更为 转校? 提交后该生数据保存，设备ID卡将失效，是否确认此操作!'
      }
      this.$confirm(title_, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        showCancelButton: false,
        center: true,
        type: 'warning'
      }).then(() => {
        this_.saveStatuidentInfo(optionList)
      }).catch(() => {
      })
    },
    saveStatuidentInfo(index) {
      this.$fetch(this.api.admin_student_suspension, {id: this.arryList[index].id, remarks: ''}).then((response) => {
        if (response.code === 0) {
          this.$message.error(response.msg)
          this.InitFn()
        } else {
          this.$message.error('操作失败！')
        }
      }).catch((err) => {
        console.log(err)
      })
    },
    handleCommand(command,option) {
      console.log(command,option)
      let command_ = command.split('-')
      let n = this;
      if (Number(command_[0]) === 1) {
        this.checkIdCard(this.arryList[command_[1]].id)
      }
      // 视频采集
      if (Number(command_[0]) === 2) {
        this.addStudent(this.arryList[command_[1]].id)
      }
      // 视频采集
      if (Number(command_[0]) === 5) {
        this.detelStudentFn(this.arryList[command_[1]].id)
      }
      // 视频记录
      if (Number(command_[0]) === 3) {
        let title_ = '确定该生再本校的状态变更为 离校/休学? 提交后该生数据保存，设备ID卡将失效，是否确认此操作!'
        this.$confirm(title_, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          n.saveStatuidentInfo(command_[1])
        }).catch(() => {
        })
      }
      if (Number(command_[0]) === 4) {
        this.studentInfoVisible = true;
        this.studentId = this.arryList[command_[1]].id;
      }
      // 二维码
      if (Number(command_[0]) === 6) {
         console.log('111进入了6')
        this.qrcodeVisible = true
        this.studentoption = JSON.parse(JSON.stringify(option))
      }
    },
    detelStudentFn(id) {
      let self_ = this
      this.$confirm('确认删除该生信息？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        self_.$post(self_.api.admin_student_delete, {
          id: id
        }).then((response) => {
          if (response.code === 0) {
            self_.InitFn()
            this.$message({
              message: '删除成功',
              type: 'success'
            })
          } else {
            this.$message.error(response.msg)
          }
        }).catch((err) => {
          console.log(err)
        })
      }).catch(() => {

      })
    }
  },
  mounted() {
  },
}
</script>
